<template>
	<view class="container">
		<empty v-if="expressList.length == 0"></empty>
		<view v-else>
			<uni-card v-for="(expressItem,expressIndex) in expressList">
				<view slot="title" style="display: flex;flex-direction: row;line-height: 80upx;border-bottom: 1px solid #edeef0;">
					<view>
						<uni-icons type="star" size="14"></uni-icons>
					</view>
					<view style="margin-left: 4px;">
						运单号：
					</view>
					<view>{{expressItem.waybillNo}}</view>
					<view style="margin-left: auto;color:#EE210C" v-if="expressItem.orderStatus == 2">已取消</view>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 20upx;">
					<view style="text-align: center;">
						<view style="font-size: 34upx;font-weight: bold;">{{expressItem.senderCity}}</view>
						<view style="font-size: 24upx;color: #a4a7ad;">{{expressItem.senderName}}</view>
					</view>
					<view style="line-height: 30upx;">
						<image src="@/static/image/express/yjt.png" style="width: 80upx;height: 26upx;"></image>
					</view>
					<view style="text-align: center;">
						<view style="font-size: 34upx;font-weight: bold;">{{expressItem.receiverCity}}</view>
						<view style="font-size: 24upx;color: #a4a7ad;">{{expressItem.receiverName}}</view>
					</view>
				</view>
				<view style="margin-top: 30upx;font-size: 24upx;color: #a4a7ad;">
					订单时间：{{expressItem.orderTime}}
				</view>
				<view class="box-action" slot="actions">
					<view @click="goToLogistics(expressItem)">
						<uni-icons type="list" size="14"></uni-icons>
						<span style="margin-left: 5upx;">详情</span>
					</view>
					<view @click="showCancelModal(expressItem)" style="margin-left: 30upx;" v-if="expressItem.orderStatus == 1">
						<uni-icons type="trash-filled" size="14"></uni-icons>
						<span style="margin-left: 5upx;">取消</span>
					</view>
				</view>
			</uni-card>
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
		<uni-popup ref="inputDialog" type="center">
			<uni-popup-dialog mode="input" title="取消原因" placeholder="请输入取消原因" @confirm="cancelExpress" :before-close="true"
			 @close="closeDialog">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import empty from "@/components/empty.vue"
	import uniCard from "@/components/uni-card/uni-card.vue"
	import mixLoadMore from "@/components/mix-load-more/mix-load-more.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import uniPopupDialog from "@/components/uni-popup-dialog/uni-popup-dialog.vue"
	export default {
		data() {
			return {
				expressList: [],
				page: 1,
				total: 0,
				userId: uni.getStorageSync("userInfo").userUuid,
				loadMoreStatus: 0,
				cancelItem: {},
				cancelReason: ""
			}
		},
		components: {
			uniCard,
			mixLoadMore,
			empty,
			uniPopup,
			uniPopupDialog
		},
		onLoad() {
			this.initExpress()
		},
		onReachBottom() {
			if (this.loadMoreStatus == 0) {
				this.page++
				this.initExpress()
			}
		},
		methods: {
			goToLogistics(item) {
				uni.navigateTo({
					url: "./expressLogistics?id=" + item.id
				})
			},
			initExpress() {
				this.loadMoreStatus = 1;
				let params = {
					page: this.page,
					pageSize: 5,
					userId: this.userId,
					areaCode: this.$api.request.communityCode,
					hasChildren: false
				}
				this.$api.request.queryExpressRecordPage(params, (res) => {
					this.loadMoreStatus = 0;
					if (res.code == 200) {
						this.expressList = this.expressList.concat(res.data.records);
						this.total = Number.parseInt(res.data.total)
						if (this.expressList.length < this.total) {
							this.loadMoreStatus = 0;
						} else {
							this.loadMoreStatus = 2;
						}
					}
				})
			},
			showCancelModal(item) {
				this.cancelItem = item;
				this.$refs.inputDialog.open()
			},
			closeDialog() {
				this.$refs.inputDialog.close()
			},
			cancelExpress(value) {
				if (!value) {
					this.$api.msg("请输入取消原因")
					return
				}
				this.closeDialog()
				let params = {
					expressType:this.cancelItem.thirdCode,
					orderId: this.cancelItem.orderId,
					waybillNo: this.cancelItem.waybillNo,
					cancelDesc: value
				}
				this.$api.request.cancelExpress(params, res => {
					if (res.code == 200) {
						this.$api.msg("取消成功")
						this.expressList = [];
						this.initExpress()
					}else{
						this.$api.msg("取消失败")
					}
				})
			}
		}
	}
</script>

<style scoped>
	page {
		width: 100%;
		height: 100%;
		background-color: #FBFBFB;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.button-class {
		padding: 14upx 30upx;
		border-radius: 50upx;
		border: 1px solid #a4a7ad;
	}

	.box-action {
		margin-top: 14upx;
		padding-right: 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		border-top: 1px solid #edeef0;
		line-height: 80upx;
	}
</style>
